<template>
<div id="swipeTop">
  <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in state.images" :key="image">
    <img :src="image.pic" />
  </van-swipe-item>
</van-swipe>
</div>
  
</template>

<script> 
import { onMounted, reactive } from 'vue';
import { getBanner } from '@/request/api';
import axios from 'axios'// axios使用

    export default {
         setup() {
          const state=reactive({
            images:[
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ]})
    
    //获取接口数据 方法1
    //  onMounted(()=>{
    //         axios.get('http://localhost:3000/banner?type=2').then(res=>{
    //             console.log(res.data);
    //             state.images=res.data.banners;
    //             console.log(state.images);
    //         })
    //      })
            //方法2
            // getSwipeList().then(res=>{
            //     console.log(res);
            //     state.images=res.data.banners;
            // })
            //方法3
            onMounted(async()=>{
              let res=await getBanner();
              state.images=res.data.banners;
            })
    return { state };
  }
    }
</script>

<style lang="less" scoped>
#swipeTop{
  .van-swipe{
    width: 100%;
    height: 170px;
      .van-swipe-item{
        padding:10px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
  }

}
</style>